<template>
	<div>
		<div style="height: 230px;" @mouseover="showDesc = true" @mouseout="showDesc = false">
			<router-link target="_blank" :to="'/video/' + videoId" >
				<transition name="el-zoom-in-bottom">
					<div v-show="showDesc">
						<el-row>
							<el-col class="video_img_shadow" :span="24">
								<p v-text="description"></p>
							</el-col>
						</el-row>
					</div>
				</transition>
				<img :src="videoCoverUrl"
					style="height: 230px; width: 100%">
			</router-link>
			<span class="time_label" v-text="second2StrTime(duration)"></span>
		</div>

		<div style="height: 80px; padding-top: 10px">
			<el-row>
				<el-col :span="4">
					<router-link target="_blank" :to="'/user/' + publisherId">
						<el-avatar :size="50" :src="publisherAvatarUrl"></el-avatar>
					</router-link>
				</el-col>
				<el-col :span="20">
					<router-link style="color: black; text-decoration: none;" :to="'/video/' + videoId">
						<p v-text="titleSub(title)"></p>
					</router-link>
				</el-col>
			</el-row>
		</div>

	</div>
</template>

<script>
	export default {
		name: "VideoListItem",
		props: {
			duration: Number,
			title: String,
			publisherAvatarUrl: String,
			publisherId: Number,
			description: String,
			videoCoverUrl: String,
			videoId: Number
		},
		data() {
			return {
				showDesc: false
			}
		},
		methods: {
			titleSub(title) {
				if (title.length <= 16) {
					return title;
				}

				return title.substr(0, 13) + "...";
			},
			second2StrTime(secondTime) {
				var hour = parseInt(secondTime / 3600);
				secondTime = parseInt(secondTime % 3600);
				var minute = parseInt(secondTime / 60);
				var second = parseInt(secondTime % 60);

				var res = "";
				if (hour != 0) {
					res += hour;
					res += ":"
				}

				if (minute < 10) {
					res += "0";
				}
				res += minute;
				res += ":";
				if (second < 10) {
					res += "0";
				}
				res += second;
				return res;
			}
		}
	}
</script>

<style scoped>
	.video_img_shadow {
		height: 230px;
		position: absolute;
		padding-left: 20px;
		padding-right: 20px;
		color: white;
		background-color: rgb(0, 0, 0, .5);
		font-weight: bold;
	}

	.time_label {
		float: right;
		position: relative;
		margin-top: -26px;
		color: white;
		background-color: rgb(0, 0, 0, .7);
		padding-top: 1px;
		padding-left: 3px;
		padding-right: 3px;

	}
</style>